<template>
    <div class="page">
        <div class="line">
            <vg-button>普通按钮</vg-button>
            <vg-button type="primary">首要按钮</vg-button>
            <vg-button type="success">成功按钮</vg-button>
            <vg-button type="warning">警告按钮</vg-button>
            <vg-button type="danger">危险按钮</vg-button>
            <vg-button type="info">信息按钮</vg-button>
            <vg-button type="strict">严肃按钮</vg-button>
        </div>
    
        <div class="line">
            <vg-button :plain="true">朴素按钮</vg-button>
            <vg-button type="primary" :plain="true">首要按钮</vg-button>
            <vg-button type="success" :plain="true">成功按钮</vg-button>
            <vg-button type="warning" :plain="true">警告按钮</vg-button>
            <vg-button type="danger" :plain="true">危险按钮</vg-button>
            <vg-button type="info" :plain="true">信息按钮</vg-button>
            <vg-button type="strict" :plain="true">严肃按钮</vg-button>
        </div>
    
        <div class="line">
            <vg-button :plain="false" :round="true">圆角按钮</vg-button>
            <vg-button type="primary" :plain="false" :round="true">首要按钮</vg-button>
            <vg-button type="success" :plain="true" :round="true">成功按钮</vg-button>
            <vg-button type="warning" :plain="false" :round="true">警告按钮</vg-button>
            <vg-button type="danger" :plain="false" :round="true">危险按钮</vg-button>
            <vg-button type="info" :plain="false" :round="true">信息按钮</vg-button>
            <vg-button type="strict" :plain="false" :round="true">严肃按钮</vg-button>
        </div>
         <div class="line">
            <vg-button  :round="true">圆角按钮</vg-button>
            <vg-button type="primary" :plain="false" :round="true">首要按钮</vg-button>
            <vg-button type="success" :plain="false" :round="true">成功按钮</vg-button>
            <vg-button type="warning" :plain="false" :round="true">警告按钮</vg-button>
            <vg-button type="danger" :plain="false" :round="true">危险按钮</vg-button>
            <vg-button type="info" :plain="false" :round="true">信息按钮</vg-button>
            <vg-button type="strict" :plain="false" :round="true">严肃按钮</vg-button>
        </div>
    
        <div class="line">
            <vg-button :plain="false" :circle="true"></vg-button>
            <vg-button type="primary" :plain="false" :circle="true"></vg-button>
            <vg-button type="success" :plain="false" :circle="true"></vg-button>
            <vg-button type="warning" :plain="false" :circle="true"></vg-button>
            <vg-button type="danger" :plain="false" :circle="true"></vg-button>
            <vg-button type="info" :plain="false" :circle="true"></vg-button>
            <vg-button type="strict" :plain="false" :circle="true"></vg-button>
        </div>
    
        <div class="line">
            <vg-button :disabled="true" :plain="true">禁用按钮</vg-button>
            <vg-button type="primary" :disabled="true">首要按钮</vg-button>
            <vg-button type="success" :disabled="true">成功按钮</vg-button>
            <vg-button type="warning" :disabled="true">警告按钮</vg-button>
            <vg-button type="danger" :disabled="true">危险按钮</vg-button>
            <vg-button type="info" :disabled="true">信息按钮</vg-button>
            <vg-button type="strict" :disabled="true">严肃按钮</vg-button>
        </div>
    
        <div class="line">
            <vg-button :disabled="true" :plain="true" >禁用朴素</vg-button>
            <vg-button type="primary" :disabled="true" :plain="true">首要按钮</vg-button>
            <vg-button type="success" :disabled="true" :plain="true">成功按钮</vg-button>
            <vg-button type="warning" :disabled="true" :plain="true">警告按钮</vg-button>
            <vg-button type="danger" :disabled="true" :plain="true">危险按钮</vg-button>
            <vg-button type="info" :disabled="true" :plain="true">信息按钮</vg-button>
            <vg-button type="strict" :disabled="true" :plain="true">严肃按钮</vg-button>
        </div>
    
        <div class="line">
            <vg-button  :loading="true">普通按钮</vg-button>
            <vg-button type="primary" :loading="true">首要按钮</vg-button>
            <vg-button type="success" :loading="true">成功按钮</vg-button>
            <vg-button type="warning" :loading="true">警告按钮</vg-button>
            <vg-button type="danger" :loading="true">危险按钮</vg-button>
            <vg-button type="info" :loading="true">信息按钮</vg-button>
            <vg-button type="strict" :loading="false" icon="vg-icon-delete">严肃按钮</vg-button>
        </div>

        <div class="line">
            <vg-button type="success" size="mini">超小按钮</vg-button>
            <vg-button  size="small">小按钮</vg-button>
            <vg-button type="success" >默认按钮</vg-button>
            <vg-button type="primary" size="medium">中型按钮</vg-button>
            <vg-button type="success" size="large">大型按钮</vg-button>
           
        </div>
        
    </div>
    </template>
    <script>
    import vgButton from "../packages/button"
    import { defineComponent } from 'vue';
    export default defineComponent({
        components:{vgButton}
    })
    </script>
    <style lang="scss">
    .line{
        margin-bottom: 32px;
        button{
            margin-right: 8px;
        }
    }
    </style>